import React, { Component } from 'react';
import classnames from 'classnames';
import { observer, inject } from 'mobx-react';
import { toJS } from 'mobx';
import { withRouter, Route } from 'react-router-dom';
import { Avatar, List, ListView, Tools } from 'weaver-mobile';
import { RouteLayout, TabPage, ListViewPage } from 'weaver-mobile-page';

const getLabel = Tools.getLabel;

@inject('viewStore')
@withRouter
@observer
export default class StaticReadList extends Component {
  static defaultProps = {
    prefixCls: 'email-readlist',
  }

  constructor(props) {
    super(props);
    this.state = {
      page: 0, //默认显示发件人栏
      key: 'sendfrom'
    }
  }

  renderRow = (rowData, sectionID, index) => {
    const { prefixCls, viewStore: { staticViewStore } } = this.props;
    const { staticViewBean: { isInternal } } = staticViewStore;
    const cls = `${prefixCls}-list`;
    return (
      <List.Item className={cls}>
        <div className={`${cls}-avatar`}>
          <Avatar name={rowData.showName} url={rowData.imageUrl} />
        </div>
        <div className={`${cls}-right`}>
          <div className={`${cls}-item-top`}>
            {rowData.showName}
          </div>
          <div className={`${cls}-item-bottom`}>
            {isInternal ? rowData.innerDetails : rowData.email}
          </div>
        </div>
      </List.Item>
    );
  }

  render() {
    const { prefixCls, viewStore: { staticViewStore } } = this.props;
    const { readTopList, staticFromList, staticToList, staticCopyList, staticSecretList } = staticViewStore;
    const cls = classnames('wm-route-layout', prefixCls);
    const { page, key } = this.state;
    const tabs = toJS(readTopList).map(d => {
      return({
        key: d.key,
        title: (
          <div className={`${prefixCls}-tab-item`}>
            <div className={`${prefixCls}-tab-item-count`}>{d.count}</div>
            <div className={`${prefixCls}-tab-item-label`}>{d.label}</div>
          </div>
        )
      });
    });

    const renderFooter = () => {
      const prefixCls = 'wm-list-view-page-modal';
      return (
        <div className={`${prefixCls}-nomore`}>
          <span className={`${prefixCls}-nomore-line-left`} />
          <span className={`${prefixCls}-nomore-line-name`}>{getLabel(390064, '没有更多啦')}</span>
          <span className={`${prefixCls}-nomore-line-right`} />
        </div>
      )
    };

    return (
      <RouteLayout>
        <div className={cls} key="outerReadList">
          <TabPage
            className={`${prefixCls}-tab`}
            tabs={tabs}
            tabProps={{
              page: page,
              onChange: (tab, index) => {this.setState({ page: index, key: tab.key})},
            }}
            defaultTabBarProps={{ page: 0, key:'sendfrom' }}
          />
          <div className={`${prefixCls}-contianer`}>
            {key === 'sendfrom' && <ListView
              dataSource={staticFromList}
              renderRow={(this.renderRow)}
              renderFooter={renderFooter}
              style={{ height: '100%' }}
            />}
            {key === 'sendto' && <ListView
              dataSource={staticToList}
              renderRow={(this.renderRow)}
              renderFooter={renderFooter}
              style={{ height: '100%' }}
            />}
            {key === 'sendcc' && <ListView
              dataSource={staticCopyList}
              renderRow={this.renderRow}
              renderFooter={renderFooter}
              style={{ height: '100%' }}
            />}
            {key === 'sendbcc' && <ListView
              dataSource={staticSecretList}
              renderRow={this.renderRow}
              renderFooter={renderFooter}
              style={{ height: '100%' }}
            />}
          </div>
        </div>
      </RouteLayout>
    )
  }
}
